<template>
	<view class="style-content style-column">
		<view class="style-line style-row">
			<view class="style-half style-row">
				<view class="style-one-of-third">姓名：</view>
				<editor id="editor" class="style-two-of-third" placeholder="点击输入" @input="onNameChange"></editor>
			</view>
			<view class="style-half style-row">
				<view class="style-one-of-third">年龄：</view>
				<editor class="style-two-of-third" placeholder="点击输入" @input="onIdChange"></editor>
			</view>
		</view>
		<view class="result">操作结果：{{ log }}</view>
		<view class="btns">
			<!-- 					<button class="style-line" @click="isOpen" type="default">开启关闭查询</button> -->
			<button class="style-line" @click="openDatabase" type="primary">开启</button>
			<button class="style-line" @click="closeDatabase" type="warn">关闭</button>
			<button class="style-line" @click="insertOneData" type="primary">插入</button>
		</view>
		<view class="result">数据列表</view>
		<view class="list" v-for="(ele, index) in userInfos" :key="ele.id" :class="index % 2 === 0 ? 'one' : 'twe'">
			<view class="left">
				<text>{{ ele.name }}</text>
				<text>-</text>
				<text>{{ ele.id }}</text>
			</view>
			<view class="right"><button type="warn" @click="deleteDataByName(ele)" size="mini">删除</button></view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			userInfos: [{ name: 666, id: 123 }],
			//数据库名称，这里我推测应该是要和下面一行数据库路径中的名称保持一致，暂时没验证过不一致会怎样
			databaseName: 'project',
			//数据库路径
			databasePath: '_doc/project.db',
			//数据表名称
			tableName: 'userInfo',
			//用户输入的名字
			inputName: '',
			//用户输入的工号
			inputId: '',
			//操作日志
			log: '请开始操作'
		};
	},
	onLoad() {
		this.openDatabase();
		this.createTable();
		this.querryAllData();
	},
	methods: {
		onNameChange(e) {
			let input = e.detail.text;
			//不知道为啥，这里编辑框的内容最后总是带有一个换行符'\n'，所以需要将其处理掉
			this.inputName = input.substring(0, input.lastIndexOf('\n'));
			this.log = this.inputName;
		},
		onIdChange(e) {
			let input = e.detail.text;
			this.inputId = input.substring(0, input.lastIndexOf('\n'));
			this.log = this.inputId;
		},
		isOpen() {
			let res = plus.sqlite.isOpenDatabase({
				name: this.databaseName,
				path: this.databasePath
			});
			console.log('plus.sqlite', plus.sqlite);
			console.log('res', res);
			this.log = res ? '数据库已开启' : '数据库已关闭';
			return res;
		},
		openDatabase() {
			plus.sqlite.openDatabase({
				name: this.databaseName,
				path: this.databasePath,
				success: e => {
					console.log('e', e);
					this.log = '打开或创建数据库成功';
				},
				fail: e => {
					console.log('失败', e);
					this.log = '打开或创建数据库失败';
				}
			});
		},
		closeDatabase() {
			plus.sqlite.closeDatabase({
				name: this.databaseName,
				success: e => {
					this.log = '关闭数据库成功';
				},
				fail: e => {
					console.log(e);
					this.log = '关闭数据库失败';
				}
			});
		},
		createTable() {
			const createSql = 'create table if not exists ' + this.tableName + '(name VARCHAR(32) PRIMARY KEY NOT NULL,id VARCHAR(32) NOT NULL)';
			console.log(createSql);
			plus.sqlite.executeSql({
				name: this.databaseName,
				sql: createSql,
				success: e => {
					this.log = '创建数据表成功';
				},
				fail: e => {
					console.log(e);
					this.log = '创建数据表失败';
				}
			});
		},
		insertOneData() {
			if (!this.inputName || 0 === this.inputName.length) {
				this.log = '姓名为空，请输入姓名和工号';
				return;
			}
			const res = this.userInfos.find(ele => ele.name === this.inputName);
			if (res) {
				this.log = '该姓名已存在!';
				return;
			}
			let key = '(name,id)';
			let value = "'" + this.inputName + "', '" + this.inputId + "'";
			let insertSql = 'insert into ' + this.tableName + key + ' values(' + value + ')';
			console.log(insertSql);
			plus.sqlite.executeSql({
				// 注意这里 name 传参是数据库名，而不是表名
				name: this.databaseName,
				sql: insertSql,
				success: res => {
					this.log = '插入数据成功';
					this.userInfos.push({
						name: this.inputName,
						id: this.inputId
					});
					console.log(this.userInfos);
				},
				fail: e => {
					console.log(e);
					if (e.code === -1404) {
						this.log = '插入失败,该数据已存在';
					} else {
						this.log = '插入数据失败';
					}
				}
			});
		},
		deleteDataByName(data) {
			let deleteDataByNameSql = `DELETE FROM ${this.tableName} WHERE name = '${data.name}'`;
			console.log(deleteDataByNameSql);
			plus.sqlite.executeSql({
				name: this.databaseName,
				sql: deleteDataByNameSql,
				success: res => {
					console.log(res);
					this.log = '根据姓名删除数据成功';
					this.userInfos = this.userInfos.filter(ele => ele.name !== data.name);
				},
				fail: e => {
					console.log(e);
					this.log = '根据姓名删除数据失败';
				}
			});
		},
		deleteAllData() {
			let deleteAllDstaSql = `DELETE FROM ${this.tableName}`;
			console.log(deleteAllDstaSql);
			plus.sqlite.executeSql({
				name: this.databaseName,
				sql: deleteAllDstaSql,
				success: res => {
					console.log(res);
					this.log = '删除所有数据成功';
					this.userInfos = [];
				},
				fail: e => {
					console.log(e);
					this.log = '删除所有数据失败';
				}
			});
		},
		querryTargetData() {
			if (!this.inputName || 0 === this.inputName.length) {
				this.log = '姓名为空，请输入姓名后再查询';
				return;
			}
			let key = 'name';
			let value = "'" + this.inputName + "'";
			let selectSql = 'select * from ' + this.tableName + ' where ' + key + ' = ' + value;
			console.log(selectSql);
			// 注意这里使用的是 selectSql，不是 executeSql
			plus.sqlite.selectSql({
				name: this.databaseName,
				sql: selectSql,
				success: res => {
					this.userInfos = [];
					console.log(res);
					this.log = '查询数据成功';
					for (let i = 0; i < res.length; i++) {
						let item = res[i];
						this.userInfos.push({
							name: item.name,
							id: item.id
						});
					}
				},
				fail: e => {
					console.log(e);
					this.log = '查询数据失败';
				}
			});
		},
		querryAllData() {
			let selectSql = 'select * from ' + this.tableName;
			console.log(selectSql);
			// 注意这里使用的是 selectSql，不是 executeSql
			plus.sqlite.selectSql({
				name: this.databaseName,
				sql: selectSql,
				success: res => {
					console.log(res);
					this.log = '查询数据成功';
					this.userInfos = [];
					for (let i = 0; i < res.length; i++) {
						let item = res[i];
						this.userInfos.push({
							name: item.name,
							id: item.id
						});
					}
				},
				fail: e => {
					console.log(e);
					this.log = '查询数据失败';
				}
			});
		}
	}
};
</script>
<style lang="scss">
.btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	padding: 24rpx 24rpx 0;
	margin-bottom: 24rpx;
	&::after {
		content: '';
		flex: auto;
	}
}
.btns .style-line {
	margin-right: 16rpx;
	margin-bottom: 0rpx;
	width: max-content;
}
.list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	padding: 0 24rpx;
	.left {
		height: 100%;
		display: flex;
		align-items: center;
		flex: 1;
	}
	.right {
		display: flex;
		align-items: center;
		justify-content: right;
		height: 100%;
		width: max-content;
	}
}
.one {
	background-color: #456789;
}
.twe {
	background-color: darkgoldenrod;
}
.style-content {
	padding: 24rpx 0;
	width: 100%;
	height: 100%;
	.result{
		padding: 0 24rpx;
	}
}

.style-line {
	width: 100%;
	height: 75upx;
	line-height: 75upx;
}

.style-row {
	padding: 0 12rpx;
	display: flex;
	flex-direction: row;
}

.style-column {
	display: flex;
	flex-direction: column;
}

.style-half {
	width: 50%;
	height: 75upx;
}

.style-one-of-third {
	width: 33.33%;
	height: 75upx;
	line-height: 75upx;
}

.style-two-of-third {
	width: 66.67%;
	height: 75upx;
	line-height: 75upx;
}
</style>
